<template>
  <div class="safety-promotion">
    <Header></Header>
    <div class="headers">
        <div>
            <img src="../../../static/img/logo_1.png" alt="">
        </div>
        <h2>安全宣传</h2>
    </div>
    <div class="content">
        <ul>
            <li v-for="(iteam, index) in safetyPromotionList" :key="index"
            v-infinite-scroll="loadMore" 
            infinite-scroll-disabled="loading" 
            infinite-scroll-distance="10">
                <div class="left">
                    <img :src="iteam.cover" alt="">
                </div>
                <div class="right">
                    <router-link :to="{name:'SafetyPromotionDetails',params:{id:iteam.id}}">
                    <h3>
                        {{iteam.title}}
                    </h3>
                    <p>{{iteam.excerpt}}</p>
                    </router-link>
                </div>
                <span></span>    
            </li>
        </ul>
    </div>
    <div class="fixeds" v-show="topShow" ref="viewBox">
            <a href="#">
                <img src="../../../static/img/back-top.png" alt="">
            </a>
    </div>
    <p>已经到最后了</p>
     <Footer></Footer>
    <Interactive></Interactive>
  </div>
</template>
<script>
import Header from '../productVideo/components/Header'
import Interactive from '../interactive/Interactive'
import Footer from '../home/components/Footer'
export default {
  name: "SafetyPromotion",
  data(){
      return {
          safetyPromotionList: [],
          topShow:true,
          pages: 1
      }
  },
  components: {
      Header,
      Footer,
      Interactive
  },
  created(){
      this.axios.get('/articles/index',{
          params: {
            per_page: 10,
            page:1,
            category:2
          }
      })
      .then((res) => {
          this.safetyPromotionList = res.data.data;
      })
      .catch((error) => {
          console.log(error);
      })
  },
    methods:{
        loadMore() {
           this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 2000);
            this.axios.get('/articles/index',{
                    params: {
                        per_page: 10,
                        page: this.pages + 1,
                        category: 2
                    }
                })
                .then((res) => {
                    // this.newsDetailsList.push(res.data.data[0]);
                    this.safetyPromotionList = this.safetyPromotionList.concat(res.data.data);
                    this.pages++;
                })
                .catch((error) => {
                    console.log(error)
                })
        },
  }
}
</script>
<style scoped>
.safety-promotion{
    width: 100%;
    height: auto;
    padding-bottom: .97rem;
}
.safety-promotion .headers{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
    vertical-align: middle;
}
.safety-promotion .headers div{
    width: .53rem;
    height: .53rem;
    float: left;
    margin-left: .19rem;
}
.safety-promotion .headers div img{
    width: 100%;
    height: auto;
}
.safety-promotion .headers h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.safety-promotion .content{
    width: 6.7rem;
    height: auto;
    margin-top: .13rem;
    margin-bottom: .5rem;
}
.safety-promotion .content ul li{
    width: 6.75rem;
    height: 1.17rem;
    margin-left: .4rem;
    margin-top: .4rem;
    position: relative;
}
.safety-promotion .content ul li .left{
    display: inline-block;
    width: 2rem;
    height: 1.17rem;
}
.safety-promotion .content ul li .left img{
    width: 100%;
    height: 1.17rem;
}
.safety-promotion .content ul li .right{
    display: inline-block;
    width: 4.43rem;
    height: 1.17rem;
    vertical-align: top;
    overflow: hidden;
    margin-left: .2rem;
}
.safety-promotion .content ul li .right h3{
    font-size: 14px;
    color: #333;
    overflow: hidden;
    width: 4.42rem;
    height: .38rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.safety-promotion .content ul li .right h3 a{
    height: .4rem;
}
.safety-promotion .content ul li .right p{
    font-size: 12px;
    color: #999;
    margin-top: .1rem;
    height: .613rem;
    overflow: hidden;
}
.safety-promotion .content ul li span{
    width: 6.7rem;
    border-bottom: .02rem solid #e8e8e8;
    float: left;
    margin-top: .12rem;
}
.safety-promotion .fixeds{
    width: .7rem;
    height: .7rem;
    position: fixed;
    bottom: 2.5rem;
    right: .3rem;
}
.safety-promotion .fixeds img{
    width: 100%;
    height: auto;
}
.safety-promotion>p{
  width: 100%;
  height: auto;
  font-size: .26rem;
  color: #1d2977;
  margin-top: .49rem;
  margin-bottom: .9rem;
  text-align: center;
}
@media screen and (max-width: 320px) and (min-width: 320px) {
.safety-promotion .content ul li .right p{
    font-size: 12px;
    color: #999;
    height: .8rem;
    overflow: hidden;
}
.safety-promotion .content ul li .right{
    display: inline-block;
    width: 4.43rem;
    height: 1.3rem;
    vertical-align: top;
    overflow: hidden;
    margin-left: .2rem;
}
}  
@media screen and (max-width: 360px) and (min-width: 360px) {
.safety-promotion .content ul li .right p{
    font-size: 12px;
    color: #999;
    height: .73rem;
    overflow: hidden;
}
}  
</style>
